<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>充值</title>
    <link rel="stylesheet" href="../css/recharge.css">
    <link rel="stylesheet" type="text/css" href="../css/foot_style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/head_style.css"/>
    <link rel="stylesheet" href="../js/layui-v2.2.6/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../css/fontCss.css"/>
    <script src="../js/layui-v2.2.6/layui/layui.js"></script>
</head>
<body>
    <!--头部-->
    <div class="head">
        <div class="head1 ">
            <img class="img" src="../img/top1.png" alt="汇网" width="50" height="50"/>

            <!-- 这点样式不再head_style样式中哦 -->
            <div class="text-box">
                <p>充值</p>
            </div>

            <div class="layui-btn layui-btn-sm fabu-btn">发&nbsp;&nbsp;布</div>
            <div class="btns">
                        <span class="language-btns" >
                            中文
                            <i class="layui-icon layui-icon-face-smile language-icon">&#xe61a;</i>
                        &nbsp;&nbsp;&nbsp;
                            <div class="span-div">
                                <p class="cn">中文</p>
								<hr/>
								<p class="eng">English</p>
                            </div>
                        </span>
                <span>&nbsp;&nbsp;&nbsp;</span>
                <div class="img-userhead">
                    <img src="../img/1/10.png" width="32" height="32" style="border-radius: 16px;"><!--头像-->
                    <span class="user-btn">Manty
                                <i class="layui-icon layui-icon-face-smile user-icon" style="font-size: 14px;">&#xe61a;</i>
                            </span>
                    <div class="userbox">
                        <div class="userbox-user">
                            <img src="../img/1/10.png"/>
                            <span class="userbox-usename">Manty</span>
                            <span class="userbox-usertype">个人用户</span>
                        </div>
                        <div class="userbox-set">
                            <i class="iconfont " style="font-size: 14px;color: #333333;">&#xe606;</i>
                            &nbsp;&nbsp;&nbsp;设置
                        </div>
                        <div class="userbox-out">
                            <i class="iconfont " style="font-size: 14px;color: #333333;">&#xe652;</i>
                            &nbsp;&nbsp;&nbsp;安全退出
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="title"><p>充值</p></div>
        <div class="tip"><span>1</span>选择支付币种</div>
        <div class="money-type"><a href="###" class="selected hv">￥&nbsp;人民币</a><a href="###" class="hv">$&nbsp;&nbsp;美金</a></div>
        <div class="tip"><span>2</span>选购买次数</div>
        <div class="money-type"><a href="###" class="hv">￥50/10次</a><a href="###" class="selected hv">￥100/22次</a><a href="###" class="hv">￥200/45次</a></div>
        <div class="tip"><span>3</span>选择支付方式</div>
        <div class="money-type"><a href="###" class="hv"><img src="../img/wx.png" width="30" style="vertical-align: -6px">微信支付</a><a href="###" class="selected hv"><img src="../img/zfb.png" width="30" style="vertical-align: -7px;">支付宝支付</a><a href="###" class="hv"><img src="../img/paypal.jpg" width="150" height="50"></a></div>
        <hr/>
        <div class="settlement">
            <div><button class="layui-btn">立即充值</button></div>
            <div class="msg"><span>实付金额人民币</span>￥50.00</div>
        </div>
    </div>

    <div class="foot">
        <div class="foot1">
            Copyright © 2018 世界汇网  www.thewiorldwie.cn
        </div>
    </div>

    <script>
        layui.use(['form', 'layedit', 'laydate'], function(){
            var form = layui.form
                ,layer = layui.layer
                ,layedit = layui.layedit
                ,laydate = layui.laydate
                ,$ = layui.jquery;

             $(".language-btns").click(function(){
                if(!$(".span-div").is(':hidden')){//如果当前不隐藏
                    $('.span-div').hide();//就隐藏div
                    $(".language-icon").html("&#xe61a;")
                }else{//否则
					$('.userbox').hide();//就隐藏div
					$(".user-icon").html("&#xe61a;")
                    $('.span-div').show();//那么就显示div
                    $(".language-icon").html("&#xe619;")
                }
            })

            $(".user-btn").click(function(){
                if(!$(".userbox").is(':hidden')){//如果当前不隐藏
                    $('.userbox').hide();//就隐藏div
                    $(".user-icon").html("&#xe61a;")
                }else{//否则
 					$('.span-div').hide();//就隐藏div
 					$(".language-icon").html("&#xe61a;")
                    $('.userbox').show();//那么就显示div
                    $(".user-icon").html("&#xe619;")
                }
            });

            $(".container a").on("click", function (e) {
                var target = $(this),
                    parentBox = target.parent(),
                    allA = $(parentBox).find("a");

                allA.removeClass("selected");
                target.addClass("selected");

                return false;
            })


        })
    </script>
</body>
</html>